<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>MQTT设置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="zepto.js.gz"></script>
    <link rel="stylesheet" href="mini-nord.css.gz">
</head>

<body>
    <header>
        <a href="./index.html" class="button">状态</a>
        <a href="./wifi.html" class="button">无线</a>
        <a href="./mqtt.html" class="button">MQTT</a>
        <a href="./relay.html" class="button">继电器</a>
    </header>
    <form role="form">
        <legend>MQTT设置</legend>
        <div class="input-group vertical">
            <label for="mqtt_server">服务器</label>
            <input type="text" id="mqtt_server" placeholder="m13.cloudmqtt.com:18957">
        </div>
        <div class="input-group vertical">
            <label for="mqtt_user">用户名</label>
            <input type="text" id="mqtt_user" placeholder="用户名">
        </div>
        <div class="input-group vertical">
            <label for="mqtt_pass">密 码</label>
            <input type="text" id="mqtt_pass" placeholder="密码">
        </div>
        <div>
            <button type="button" id="btn_device_save" class="primary">保存</button>
        </div>
    </form>
    <footer class="sticky">
        &copy; 2017
        <a href="#">yusp</a>
        QQ:475060921
    </footer>
</body>

</html>
<script>
    $(document).ready(function () {
        var uri = "ws://" + location.host + "/rpc/";
        var out;

        socket = new WebSocket(uri);
        socket.onopen = function (evt) {
            $("#status").html("websocket open");
            socket.send(JSON.stringify({
                "method": "my.get",
                "args": { "type": "mqtt" },
                "tag": "mqtt"
            }));
        }
        socket.onmessage = function (evt) {
            //$("#status").html(JSON.stringify(evt.data));
            try {
                var data = JSON.parse(evt.data);
                if (data.tag == "mqtt") {
                    $("#mqtt_server").val(data.result.server);
                    $("#mqtt_user").val(data.result.user);
                    $("#mqtt_pass").val(data.result.pass);
                }
            } catch (e) {
                console.log(e);
            }
        }
        socket.onerror = function (evt) {
            console.log("error," + evt);
        }

        $("#btn_device_save").click(function () {
            var d = {
                config: {
                    mqtt: {
                        enable: true,
                        server: $("#mqtt_server").val(),
                        user: $("#mqtt_user").val(),
                        pass: $("#mqtt__pass").val()
                    }
                }
            };
            $.ajax({
                type: "POST",
                url: "/rpc/Config.Set",
                contentType: "text/plain; charset=utf-8",
                data: JSON.stringify(d),
                success: function () {
                    $.ajax({
                        type: "POST",
                        url: "/rpc/Config.Save",
                        contentType: "text/plain; charset=utf-8",
                        data: JSON.stringify({ reboot: false }),
                        success: function (data, status, xhr) {
                            alert("已保存");
                        }
                    });
                },
                error: function (xhr, errorType, error) {
                    alert("保存失败");
                }
            });
        });
        //
    });

</script>